import React, {Component, Fragment} from 'react';
import {inject, observer} from 'mobx-react';
import {toJS} from "mobx";
import {
    WeaLocaleProvider,
    WeaDialog,
    WeaMoreButton,
    WeaRightMenu,
    WeaLeftTree,
    WeaLeftRightLayout,
    WeaSteps,
    WeaFormItem,
    WeaSearchGroup,
    WeaUpload,
    WeaCheckbox,
    WeaTable,
    WeaSelect,
    WeaInputNumber,
    WeaHelpfulTip
} from "ecCom";
import {WeaSwitch} from 'comsMobx';
import {Row, Col, Modal, Button, Input, message, Form} from 'antd';
import _ from 'lodash';
import LanguageConstant from '../../constant/LanguageConstant.js';
import '../../style/mouldTableMatchingComponent.less';

const {getLabel} = WeaLocaleProvider;
const FormItem = Form.Item;
const InputGroup = Input.Group;

/**
 * 表格匹配组件
 */
@inject("tableMatchingStore")
@observer
class MouldTableMatchingComponent extends Component {

    componentDidMount() {
        const {tableMatchingStore, workflowMouldRelationalId} = this.props;
        if (workflowMouldRelationalId > 0) {
            tableMatchingStore.init({workflowMouldRelationalId});
            tableMatchingStore.getMouldTableMatchingForm();
        }
    }

    componentWillReceiveProps(nextProps, nextContext) {
        const {tableMatchingStore, workflowMouldRelationalId} = this.props;
        let nextWorkflowMouldRelationalId = nextProps.workflowMouldRelationalId;
        if (nextWorkflowMouldRelationalId > 0 && workflowMouldRelationalId != nextWorkflowMouldRelationalId) {
            tableMatchingStore.init({workflowMouldRelationalId: nextWorkflowMouldRelationalId});
            tableMatchingStore.getMouldTableMatchingForm();
        }
    }

    render() {
        return (
            <div className="mould-table-matching-component">
                {this.renderForm()}
                {this.renderTable()}
            </div>
        );
    }

    renderForm = () => {
        const {tableMatchingStore} = this.props;
        const {
            mouldTableOptions, workflowDetailTableOptions, changeFormSelect, replaceRowRangeOptions,
            workflowDetailTableId: workflowDetailTableIdStore, mouldTableIndex: mouldTableIndexStore, replaceStartRow: replaceStartRowStore,
            replaceEndRow: replaceEndRowStore
        } = tableMatchingStore;
        let style = {marginBottom: 10, minHeight: "40px"};
        let mouldTableIndex = toJS(mouldTableIndexStore);
        let workflowDetailTableId = toJS(workflowDetailTableIdStore);
        let replaceStartRow = toJS(replaceStartRowStore);
        let replaceEndRow = toJS(replaceEndRowStore);
        if (mouldTableIndex == undefined) {
            mouldTableIndex = "-1";
        }
        if (workflowDetailTableId == undefined) {
            workflowDetailTableId = "-1";
        }
        if (replaceStartRow == undefined) {
            replaceStartRow = "-1";
        }
        if (replaceEndRow == undefined) {
            replaceEndRow = "-1";
        }
        return (
            <div className="mould-table-matching-from">
                <Form>
                    {/** 模板表格 **/}
                    <FormItem
                        style={style}
                        label={getLabel(LanguageConstant.MOULD_TABLE, "模板表格")}
                        labelCol={{span: 6}}
                        wrapperCol={{span: 12}}>
                        <div style={{float: "left"}}>
                            <WeaSelect
                                fieldName="mouldTableIndex"
                                options={toJS(mouldTableOptions)}
                                value={"" + mouldTableIndex}
                                style={{width: "200px"}}
                                onChange={(vlaue) => {
                                    changeFormSelect("mouldTableIndex", vlaue)
                                }}
                            >
                            </WeaSelect>
                        </div>
                    </FormItem>
                    {/** 表格替换范围 **/}
                    <FormItem
                        style={style}
                        label={getLabel(LanguageConstant.TABLE_REPLACE_RANGE, "表格替换范围")}
                        labelCol={{span: 6}}
                        wrapperCol={{span: 12}}>
                        <InputGroup>
                            <Col span={8}>
                                <WeaSelect
                                    fieldName="replaceStartRow"
                                    options={toJS(replaceRowRangeOptions)}
                                    value={"" + replaceStartRow}
                                    style={{width: "200px"}}
                                    onChange={(vlaue) => {
                                        changeFormSelect("replaceStartRow", vlaue)
                                    }}
                                >
                                </WeaSelect>
                            </Col>
                            <Col span={2}>
                                <p className="ant-form-split">-</p>
                            </Col>
                            <Col span={8}>
                                <WeaSelect
                                    fieldName="replaceEndRow"
                                    options={toJS(replaceRowRangeOptions)}
                                    value={"" + replaceEndRow}
                                    style={{width: "200px"}}
                                    onChange={(vlaue) => {
                                        changeFormSelect("replaceEndRow", vlaue)
                                    }}
                                >
                                </WeaSelect>
                            </Col>
                        </InputGroup>
                    </FormItem>
                    {/** 流程明细表 **/}
                    <FormItem
                        style={style}
                        label={getLabel(LanguageConstant.WORKFLOW_DETAIL_TABLE, "流程明细表")}
                        labelCol={{span: 6}}
                        wrapperCol={{span: 12}}>
                        <div style={{float: "left"}}>
                            <WeaSelect
                                fieldName="workflowDetailTableId"
                                options={toJS(workflowDetailTableOptions)}
                                value={"" + workflowDetailTableId}
                                style={{width: "200px"}}
                                onChange={(vlaue) => {
                                    changeFormSelect("workflowDetailTableId", vlaue)
                                }}
                            >
                            </WeaSelect>
                        </div>
                    </FormItem>
                </Form>
            </div>
        );
    }

    renderTable = () => {
        const {tableMatchingStore} = this.props;
        const {columnMappings} = tableMatchingStore;
        const columns = this.getColumns();
        return (
            <div className="mould-table-matching-cols">
                <WeaTable columns={columns} dataSource={toJS(columnMappings)} pagination={false}/>
            </div>
        );
    }

    getColumns() {
        const {tableMatchingStore} = this.props;
        const {
            changeBookMarkTableField, workflowFieldOptions: workflowFieldOptionsStroe, showTypeOptions: showTypeOptionsStore
            , changeMouldTableMatchingTableField
        } = tableMatchingStore;
        const workflowFieldOptions = toJS(workflowFieldOptionsStroe);
        const showTypeOptions = toJS(showTypeOptionsStore);
        const columns = [{
            title: getLabel(LanguageConstant.MOULD_TABLE_COL, "模板表格列"),
            dataIndex: "columnName",
            width: "35%",
        }, {
            title: getLabel(LanguageConstant.WORKFLOW_FIELD, "流程字段"),
            dataIndex: "fieldId",
            width: "25%",
            render: (text, record, index, onEdit) => {
                let fieldId = record.fieldId;
                if (fieldId == undefined) {
                    fieldId = "";
                }
                return (
                    <WeaSelect
                        showSearch
                        optionFilterProp="children"
                        style={{width: "100%"}}
                        options={workflowFieldOptions}
                        viewAttr={2}
                        value={"" + fieldId}
                        onChange={(value, showname) => {
                            changeMouldTableMatchingTableField(record.id, "fieldId", value, record)
                        }}
                    />
                )
            }
        }, {
            title: getLabel(LanguageConstant.BOOKMARKS_MATCHING_SHOWTYPE, "显示设置"),
            dataIndex: "type",
            width: "25%",
            render: (text, record, index, onEdit) => {
                let showType = record.showType;
                if (showType == undefined) {
                    showType = "";
                }
                let fieldId = record.fieldId;
                if (fieldId == undefined) {
                    fieldId = "";
                }
                let floatPrecision = parseInt("" + record.floatPrecision);
                let percentagePrecision = parseInt("" + record.percentagePrecision);
                if (isNaN(percentagePrecision) || percentagePrecision < 0) {
                    percentagePrecision = 2;
                }
                if (isNaN(floatPrecision) || floatPrecision < 0) {
                    floatPrecision = 2;
                }
                const showTypeIntVal = parseInt("" + showType);
                let key = "showType_" + fieldId;
                const showOptions = showTypeOptions[key];
                const random = key + "-" + Math.random();
                let selectStyle = {width: "100%"};
                let showFloatPrecision = false;
                let floatPrecisionFieldName = "floatPrecision";
                if (showTypeIntVal === 101 || showTypeIntVal === 102) {
                    showFloatPrecision = true;
                    if (showTypeIntVal === 101) {
                        floatPrecisionFieldName = "percentagePrecision";
                        floatPrecision = percentagePrecision;
                    }
                }
                if (showFloatPrecision) {
                    selectStyle = {width: "60%"}
                }
                if (showOptions != undefined) {
                    return (
                        <div>
                            <WeaSelect
                                key={random}
                                style={selectStyle}
                                options={showOptions}
                                viewAttr={2}
                                value={"" + showType}
                                onChange={(value, showname) => {
                                    changeMouldTableMatchingTableField(record.id, "showType", value, record)
                                }}
                            />
                            {
                                showFloatPrecision && <div style={{width: "40%", display: "inline-block"}}>
                                    {/*<span>{getLabel(LanguageConstant.DECIMAL_PLACES, "小数位数")}</span>*/}
                                    <WeaInputNumber
                                        style={{width: "100%"}}
                                        value={floatPrecision}
                                        min={0}
                                        max={100}
                                        onChange={value => {
                                            changeMouldTableMatchingTableField(record.id, floatPrecisionFieldName, value, record)
                                        }}
                                    />
                                </div>
                            }
                        </div>
                    )
                } else {
                    return (<div></div>);
                }
            }
        }];
        return columns;
    }

}

export default MouldTableMatchingComponent;